<template>
  <div class="p-4">
    <!-- 添加内边距 -->
    <el-button class="mb-4" @click="openDialog(false)">新增字段</el-button>
    <!-- 添加下边距 -->
    <div class="w-full max-w-5xl mx-auto">
      <!-- 控制 DynamicForm 的容器宽度 -->
      <DynamicForm
        ref="dsyncFormRef"
        :fields="formFields"
        @edit="editFormField"
        @del="delFormField"
      />
    </div>
    <div class="operator flex justify-center mt-5">
      <el-button type="primary" @click="reset">reset</el-button>
      <el-button type="primary" @click="submit">submit</el-button>
    </div>
    <FormFieldDialog
      v-model="dialogVisible"
      :is-edit="isEdit"
      :edit-field="editField"
      @confirm="handleDialogConfirm"
    />
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import DynamicForm, {
  type DynamicFormExpose
} from "@/components/DsyncForm/DynamicForm.vue";
import FormFieldDialog from "@/components/DsyncForm/FormFieldDialog.vue";
import { FormField } from "@/components/DsyncForm/utils";
import { cloneDeep } from "@pureadmin/utils";

defineOptions({
  name: "DsyncForm"
});

const formFields = ref<FormField[]>([
  {
    label: "姓名",
    prop: "name",
    type: "input",
    required: true,
    rules: []
  },
  {
    label: "年龄",
    prop: "age",
    type: "input-number",
    required: true,
    min: 1,
    max: 100,
    rules: []
  },
  {
    label: "性别",
    prop: "gender",
    type: "radio",
    required: true,
    options: [
      { label: "男", value: "male" },
      { label: "女", value: "female" }
    ],
    rules: []
  },
  {
    label: "出生日期",
    prop: "birthDate",
    type: "date",
    required: true,
    rules: []
  },
  {
    label: "兴趣爱好",
    prop: "hobbies",
    type: "checkbox",
    required: true,
    options: [
      { label: "阅读", value: "reading" },
      { label: "运动", value: "sports" },
      { label: "音乐", value: "music" },
      { label: "旅行", value: "travel" }
    ],
    rules: []
  },
  {
    label: "学历",
    prop: "education",
    type: "select",
    required: true,
    options: [
      { label: "高中", value: "highschool" },
      { label: "大专", value: "college" },
      { label: "本科", value: "bachelor" },
      { label: "硕士", value: "master" },
      { label: "博士", value: "phd" }
    ],
    rules: []
  },
  {
    label: "多项选择",
    prop: "multipleSelect",
    type: "multiple-select",
    required: true,
    options: [
      { label: "选项A", value: "optionA" },
      { label: "选项B", value: "optionB" },
      { label: "选项C", value: "optionC" },
      { label: "选项D", value: "optionD" }
    ],
    rules: []
  },
  {
    label: "文件",
    prop: "file",
    type: "upload",
    required: true,
    limit: 2
  },
  {
    label: "图片",
    prop: "file-image",
    type: "image-upload",
    required: true,
    limit: 2
  }
]);

const dialogVisible = ref(false);
const isEdit = ref(false);
const editField = ref<FormField>();
const openDialog = (edit: boolean, field?: FormField) => {
  isEdit.value = edit;
  editField.value = field;
  dialogVisible.value = true;
};

const handleDialogConfirm = (field: FormField) => {
  if (isEdit.value) {
    const index = formFields.value.findIndex(f => f.prop === field.prop);
    if (index !== -1) {
      formFields.value[index] = field;
    }
  } else {
    formFields.value.push(field);
  }
};
// 编辑
const editFormField = (field: FormField) => {
  openDialog(true, cloneDeep(field));
};
// 删除
const delFormField = (field: FormField) => {
  const index = formFields.value.findIndex(f => f.prop === field.prop);
  if (index !== -1) {
    formFields.value.splice(index, 1);
  }
};
// 表单提交
const dsyncFormRef = ref<DynamicFormExpose>();
const submit = () => {
  dsyncFormRef.value?.getData().then(res => {
    console.log(res);
  });
};
// 表单重置
const reset = () => {
  dsyncFormRef.value?.formRef?.resetFields();
};
</script>
